<template>
  <a-breadcrumb v-if="isShow" class="breadcrumb" separator=">">
    <a-breadcrumb-item v-for="(item) in breadList" :key="item.title">
      <router-link :to="{ path: item.path === '' ? '/' : item.path }" > 
        {{ item.title }}
      </router-link> 
    </a-breadcrumb-item>
  </a-breadcrumb>
</template>

<script>
export default {
  props: {
    breadcrumbName:{
      type:String
    },
    routerLikeTo:{
      type:String
    }

  },
  data() {
    return {
      name: "",
      breadList: []
    };
  },
  created() {
    this.getBreadcrumb();
  },
  computed: {
    isShow() {
      return this.breadList.length > 0;
    }
  },
  methods: {
    getBreadcrumb() {
      // debugger
      this.breadList = [];
      let bl;
      this.name = this.$route.name;
      let matched = this.$route.matched;
      if (matched.length > 0) {
        for (let i = 0; i < matched.length; i++) {
          if (matched[i].meta.hideTitle === undefined) {
            bl = Object.assign(
              { title: matched[i].meta.title },
              { path: matched[i].path }
            );
            this.breadList.push(bl);
            if (i == 1) {
              bl = Object.assign(
                { title: this.breadcrumbName },
                { path: this.routerLikeTo }
              );
              this.breadList.push(bl);
            }
          }
        }
      }
      // debugger
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  }
};
</script>

<style scoped>
.ant-breadcrumb {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-variant: tabular-nums;
      /* line-height: 3.3; */
      margin-top: 24px;
      margin-bottom: 24px;
      list-style: none;
      -webkit-font-feature-settings: "tnum";
      font-feature-settings: "tnum";
      color: #666666;
      font-size: 13px;
      font-family: SimSun;
      font-weight: 400;
    }</style>
